<script setup lang="ts">

const bg1Ur7 = new URL('@/assets/images/background/upload_bg1.png', import.meta.url).href

import ProgressBox from '@/components/ProgressBox.vue'
import { UploadResourceInformation } from '@/model/ResourceModels'
import { uploadResourceToBack } from '@/service/ResourceService'
import { formatFileSize } from '@/service/Utils'
import { ref } from 'vue'

const fileInput = ref<HTMLInputElement | null>(null)


// 点击容器触发 input
function triggerFileSelect() {
    fileInput.value?.click()
}

// 处理点击选择上传
function handleFileChange(event: Event) {
    const target = event.target as HTMLInputElement
    const file = target.files?.[0]
    if (file) {
        handleFile(file)
        target.value = '' // 清空 input 以允许重复选择相同文件
    }
}

// 处理拖拽上传
function handleDrop(event: DragEvent) {
    const file = event.dataTransfer?.files?.[0]
    if (file) {
        handleFile(file)
    }
}

const form = ref<UploadResourceInformation>({
    userId: -1,
    secondaryPath: '',
    name: '',
    size: '',
    title: '',
    type: '',
    description: ''
})
const readyFile = ref<File | null>(null)
const ready = ref(false)
// 统一处理上传文件
function handleFile(file: File) {
    console.log('上传文件：', file.name)
    readyFile.value = file
    ready.value = true

    // 更新表单中的文件名和大小
    form.value.name = file.name
    form.value.size = formatFileSize(file.size)
}


const modalVisible = ref(false)
const uploading = ref(false)
const showProgress = ref(false)
const progress = ref(0)
const status = ref('')
const isCancelled = ref(false)
function submitInfo() {
    console.log('上传信息：', form.value)

    // 验证表单
    if (!form.value.title || !form.value.type || !form.value.description) {
        status.value = '请填写完整信息'
        modalVisible.value = true
        return
    }

    // 开始上传
    startUpload()

}

// 开始上传流程
function startUpload() {
    if (!readyFile.value) return
    // 模拟上传进度
    uploadResourceToBack(
        readyFile.value,
        form.value,
        uploading,
        progress,
        status,
        modalVisible,
        showProgress,
        isCancelled
    ).then((result) => {
        if (result) {
            console.log('上传成功！')
            // 清空表单
            ready.value = false
            form.value = {
                userId: -1,
                secondaryPath: '',
                name: '',
                size: '',
                title: '',
                type: '',
                description: ''
            }
            // 清空文件：
            readyFile.value = null
            //到顶端
            window.scrollTo({ top: 0, behavior: 'smooth' })
        }
    })
}

// 取消上传
function cancelUpload() {
    isCancelled.value = true
    status.value = "上传已取消"
    uploading.value = false
    showProgress.value = false
}
</script>

<template>
    <div class="background" :style="{ backgroundImage: `url(${bg1Ur7})`, minHeight: '100vh' }">
        <div class="upload-container" @dragover.prevent @drop.prevent="handleDrop" @click="triggerFileSelect">
            拖拽文件到这里或点击上传
            <input type="file" ref="fileInput" class="hidden-file-input" @change="handleFileChange" />
        </div>

        <div v-if="ready" class="upload-container">
            <h2>资源信息填写</h2>

            <div class="form-group1">
                <label>文件名：</label>
                <p class="form-display">{{ form.name || 'example.pdf' }}</p>
            </div>

            <div class="form-group1">
                <label>文件大小：</label>
                <p class="form-display">{{ form.size || '15.6MB' }}</p>
            </div>

            <div class="form-group1">
                <label>标题：</label>
                <input type="text" id="title" v-model="form.title" placeholder="请输入标题" />
            </div>

            <div class="form-group1">
                <label>类型：</label>
                <select id="type" v-model="form.type">
                    <option value="">请选择类型</option>
                    <option value="document">文档</option>
                    <option value="video">视频</option>
                    <option value="voice">音频</option>
                    <option value="software">软件</option>
                    <option value="design">设计</option>
                    <option value="code">编程</option>
                    <option value="mod">工具</option>
                </select>
            </div>

            <div class="form-group">
                <label for="description">资源介绍</label>
                <textarea id="description" v-model="form.description" placeholder="请输入资源描述"></textarea>
            </div>

            <button class="submit-button" @click="submitInfo">确认上传</button>
        </div>
        <!-- 弹窗组件 -->
        <ProgressBox v-model:visible="modalVisible" title="上传状态" :progress="progress" :status="status"
            :showProgress="showProgress">
            <template #content>
                <p v-if="uploading">正在上传文件: {{ readyFile?.name }}</p>
                <p v-else>上传已完成</p>
            </template>
            <template #footer>
                <button v-if="uploading" class="modal-btn" @click="cancelUpload">取消上传</button>
                <button v-else class="modal-btn" @click="modalVisible = false">完成</button>
            </template>
        </ProgressBox>
    </div>
</template>

<style scoped>
.upload-container {
    border: 2px dashed #aaa;
    padding: 50px;
    text-align: center;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 50px auto;
    width: 60%;
    border-radius: 12px;
    transition: background-color 0.3s;
}

.upload-container:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.hidden-file-input {
    display: none;
}


.upload-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group1 {
    margin-bottom: 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 👈 让子元素水平居中 */
}

.form-group1 input,
.form-group1 select {
    width: 400px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    text-align: left;
    box-sizing: border-box;
}



.form-group textarea {
    resize: vertical;
    min-height: 250px;
}

.submit-button {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 16px;
    color: white;
    background-color: #4caf50;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    width: 100%;
}

.submit-button:hover {
    background-color: #45a049;
}

.form-display {
    width: 400px;
    padding: 10px 12px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    color: #555;
    text-align: left;
}
</style>